<template>
    <div>
        <div>
            <el-container class="system-container">
                <el-header height="70px">
                    <div class="avatorBox">
                        <h2>商业车位出租后台管理系统</h2>
                        <div style="display: flex">
                            <el-dropdown v-if="roleName">
                                <el-avatar
                                    icon="el-icon-user-solid"
                                ></el-avatar>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item
                                        >角色：{{ role }}</el-dropdown-item
                                    >
                                    <el-dropdown-item
                                        >昵称：{{ roleName }}</el-dropdown-item
                                    >
                                </el-dropdown-menu>
                            </el-dropdown>
                            <span v-else>登录</span>
                            <span @click="exit">注销</span>
                        </div>
                    </div>
                </el-header>
                <el-container>
                    <el-aside width="200px">
                        <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            :router="true"
                        >
                            <div v-if="role == 'lessors'">
                                <el-submenu index="1">
                                    <template slot="title">
                                        <i class="el-icon-user-solid"></i>
                                        <span>车位管理</span>
                                    </template>
                                    <el-menu-item
                                        index="/system/parkingsListById"
                                        >车位列表</el-menu-item
                                    >
                                    <el-menu-item
                                        index="/system/addParkingsById"
                                        >新增车位</el-menu-item
                                    >
                                </el-submenu>

                                <el-submenu index="2">
                                    <template slot="title">
                                        <i class="el-icon-menu"></i>
                                        <span slot="title">订单管理</span>
                                    </template>
                                    <el-menu-item index="/system/getOrdersById"
                                        >订单中心</el-menu-item
                                    >
                                </el-submenu>
                            </div>

                            <div v-if="role == 'superAdmins'">
                                <el-submenu index="3">
                                    <template slot="title">
                                        <i class="el-icon-s-custom"></i>
                                        <span slot="title">管理员管理</span>
                                    </template>
                                    <el-menu-item index="/system/adminslist">
                                        管理员列表
                                    </el-menu-item>
                                </el-submenu>

                                <el-submenu index="4">
                                    <template slot="title">
                                        <i class="el-icon-setting"></i>
                                        <span slot="title">日志管理</span>
                                    </template>
                                    <el-menu-item index="/system/getLogs"
                                        >查看日志</el-menu-item
                                    >
                                </el-submenu>
                            </div>
                            <div
                                v-if="role == 'admins' || role == 'superAdmins'"
                            >
                                <el-submenu index="5">
                                    <template slot="title">
                                        <i class="el-icon-setting"></i>
                                        <span slot="title">租客管理</span>
                                    </template>
                                    <el-menu-item index="/system/tenantsList"
                                        >租客列表</el-menu-item
                                    >
                                    <el-menu-item index="/system/auditTenants"
                                        >租客审核</el-menu-item
                                    >
                                </el-submenu>
                                <el-submenu index="6">
                                    <template slot="title">
                                        <i class="el-icon-setting"></i>
                                        <span slot="title">出租方管理</span>
                                    </template>
                                    <el-menu-item index="/System/LessorsList"
                                        >出租方信息</el-menu-item
                                    >
                                </el-submenu>
                                <el-submenu index="7">
                                    <template slot="title">
                                        <i class="el-icon-setting"></i>
                                        <span slot="title">订单管理</span>
                                    </template>
                                    <el-menu-item index="/system/getOrders"
                                        >订单中心</el-menu-item
                                    >
                                </el-submenu>

                                <el-submenu index="8">
                                    <template slot="title">
                                        <i class="el-icon-setting"></i>
                                        <span slot="title">车位管理</span>
                                    </template>
                                    <el-menu-item index="/system/ParkingsList"
                                        >车位列表</el-menu-item
                                    >
                                 
                                </el-submenu>
                            </div>
                        </el-menu>
                    </el-aside>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            role: localStorage.userJudge.split(",")[2],
            roleName: localStorage.userJudge.split(",")[1],
        };
    },
    methods: {
        //退出登录
        exit() {
            localStorage.removeItem("userJudge");
            this.$router.push("/login");
        },
    },
};
</script>

<style lang="scss">
.el-header {
    line-height: 70px;
    .avatorBox {
        height: 100%;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .el-avatar {
            margin-top: 15px;
            margin-right: 20px;
        }
        span {
            margin-left: 10px;
        }
    }
}
h1 {
    padding: 0;
    margin: 0;
    color: orange;
}
h2 {
    padding: 0;
    margin: 0;
}
.el-menu-item {
    border-right: none;
}
.system-container {
    height: 100vh;
}
// .el-header {
//   line-height: 60px;
// }
.el-footer {
    line-height: 60px;
}
.el-header,
.el-footer {
    background-color: lightseagreen;
    color: white;
    text-align: center;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    .el-menu {
        height: 100%;
        border-right: none;
    }
}

.el-main {
    background-color: #e9eef3;
    color: #333;
}
</style>